<div class="title">
  {{ 'Click an item to view NFSv4 permissions' | translate }}
</div>

<cdk-accordion>
  @for (aclItem of acl().acl; track aclItem; let i = $index) {
    <cdk-accordion-item
      #accordionItem="cdkAccordionItem"
      class="accordion-item"
      [class.expanded]="accordionItem.expanded"
    >
      <ix-permissions-item
        class="accordion-item-header"
        [item]="permissionItems[i]"
        (click)="accordionItem.toggle()"
      ></ix-permissions-item>
      @if (permissionDetails[i]; as details) {
        <div class="permission-details">
          <div class="details-section">
            <div class="details-title">
              {{
                details.arePermissionsBasic
                  ? ('Permissions Basic' | translate)
                  : ('Permissions Advanced' | translate)
              }}
            </div>
            <ul class="details-items">
              @for (permission of details.permissions; track permission) {
                <li
                  class="details-item"
                >
                  <ix-icon class="icon" name="check_circle"></ix-icon>
                  {{ permission }}
                </li>
              }
            </ul>
          </div>
          @if (details.flags.length) {
            <div class="details-section">
              <div class="details-title">
                {{
                  details.areFlagsBasic
                    ? ('Flags Basic' | translate)
                    : ('Flags Advanced' | translate)
                }}
              </div>
              <ul class="details-items">
                @for (flag of details.flags; track flag) {
                  <li class="details-item">
                    <ix-icon class="icon" name="check_circle"></ix-icon>
                    {{ flag }}
                  </li>
                }
              </ul>
            </div>
          }
        </div>
      }
    </cdk-accordion-item>
  }
</cdk-accordion>
